import base from "../base.js";
// 引用影厅接口
// import seats from "../../api/seats"

const seatsProps = [{
        name: "放映厅名字",
        key: "seatsName"
    }, {
        name: "是否在营业",
        key: "seatsStatus"
    }, {
        name: "从属的影院",
        key: "cinemasId"
    }
]
export default class extends base {
    // 定义页面用户输入的数据默认值，后期可以直接注释掉主要用于测试
    data = {
        seats: {
            seatsName: "环球厅",
            seatsStatus: true,
            cinemasId:"",
        },
        cinemas:[]
    }
    //  渲染页面函数
    render() {
        this.$el.html(`
            <div class="layui-font-cyan" style="font-size:28px">新增影厅</div>
            <table style="font-size:20px;border-collapse:separate;border-spacing:20px 10px;">
                <tbody>
                    ${seatsProps.map(item=>{  
                        if(item.key==="cinemasId") {
                            return `<tr><td>${item.name}:</td><td><select name="${item.key}" id="${item.key}"></select></td></tr> `
                        }else{
                            return `<tr><td>${item.name}:</td><td><input name="${item.key}" type="text" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input" value=${this.data.seats[item.key]}></td> </tr>`
                        }
                    }).join("")}
                    <tr>
                        <td></td>
                        <td>
                            <input type="button" class="layui-btn" id="addBtn" value="新增">
                        </td>
                    </tr>
                </tbody>
            </table>
        `)
        this.addBtnEle = $("#addBtn")
    }
//     async addseatsInfo() {
//         // 结构的方式拿到用户输入的影厅的数据
//         const {
//             cinemasId,seatsName,seatsStatus
//         } = this.data.seats;
//         //发送请求将用户输入的数据添加到数据库，传入的参数是影院cinemasId，影厅名字seatsName，影厅是否营业seatsStatus
//         this.data.seats= await seats.addseats({cinemasId,seatsName,seatsStatus});
 
//         this.data.seats._id ? window.alert("添加成功") : window.alert("失败")
//     }
//     // upload(){
//     // // 跳转到添加图片页面并传如当前影厅的id值
//     //     // location.hash=`#/info/load-img/${this.data.seats._id}`;
//     // }
//     handle() {
//         // 结构的方式拿到影厅的数据
//         let {
//             seats
//         } = this.data;
//         // 通过便利的方式添加事件
//         _.map(seats, (v, k) => {
//             if (k === "_id"){
//                 return
//             } else if(k==="cinemasId"){
//                 // 下拉列表的value值变化的时候，将值同步到seats信息中
//                 $(`select[name=${k}]`).on("change", e => {
//                     seats[k] = e.target.value
//                 })
//             }else{
//                 // 给用户输入框添加输入事件，触发事件时将用户输入的值添加到seats信息中
//                 $(`input[name=${k}]`).on("input", e => {
//                     seats[k] = e.target.value
//                 })
//             }           
//         })
        
//         // this.uploadBtnEle.on("click",this.upload.bind(this))
//         // 新增按钮的事件
//         this.addBtnEle.on("click", this.addseatsInfo.bind(this));
//     }
//   async mounted() {
//         // 获取影院数据
//       this.data.cinemas= await seats.getAllCinemas();
//     this.rerender()
//     }
// rerender(){
//     $(`select[name="cinemasId"]`).html(`
//         ${this.data.cinemas.map(item=>{
//             return `<option value=${item._id}>${item.name}</option>`
//         })}      
//         `)
// // 设置select的默认值,不是通过select赋值而是给this.data.seats.cinemasId赋值
//         this.data.seats.cinemasId=this.data.cinemas[0]._id;
// }
}